
<template>
  <div class="container">
    <div class="box-bg"></div>
    <div class="wallet">
      <div class="money">
        <div class="withdraw">
          <div class="num">100.00</div>
          <span>可提现(元)</span>
        </div>
        <div class="balance">
          <div class="num">100.00</div>
          <span>总资产(元)</span>
          <div class="withdrawBtn" @click="showClick">提现</div>
        </div>
      </div>

      <div class="content">
        <div class="navbar">
          <block v-for="(item,index) in walletList" :key="index">
            <div :id="index" :class="{'navbar_item_on':activeIndex == index}" class="navbar_item" @click="tabClick">
              <div class="navbar_title">{{item.title}}</div>
            </div>
          </block>
          <div class="navbar_slider" :class="navbarSliderClass"></div>
        </div>
        <swiper class="content" :duration="50" style='height: 100%' @change="swiperChange" :current="currentTab" @animationfinish="onAnimationfinish">
          <swiper-item class="content_item" >
            <div class="income">
              <div class="income-list">订单支付<span class="income-money">+200元</span></div>
              <div class="income-time">2017-10-08</div>
            </div>
            <div class="income">
              <div class="income-list">订单支付<span class="income-money">+200元</span></div>
              <div class="income-time">2017-10-08</div>
            </div>
            <div class="income">
              <div class="income-list">订单支付<span class="income-money">+200元</span></div>
              <div class="income-time">2017-10-08</div>
            </div>
          </swiper-item>

          <swiper-item class="content_item" >
            <div class="income">
              <div class="income-list">钱包提现<span class="income-money">-200元</span></div>
              <div class="income-time">2017-10-08</div>
            </div>
            <div class="income">
              <div class="income-list">钱包提现<span class="income-money">-200元</span></div>
              <div class="income-time">2017-10-08</div>
            </div>
            <div class="income">
              <div class="income-list">钱包提现<span class="income-money">-200元</span></div>
              <div class="income-time">2017-10-08</div>
            </div>
          </swiper-item>
        </swiper>
      </div>

    </div>

    <div class="mask" v-if="isShow">
      <div class="popup">
        <div class="popup-title">提现</div>
        <p class="popup-tit">提现金额</p>
        <div style="width: 100%;display: flex;justify-content: center"><span class="icon">￥</span><input class="popInput" type="number" placeholder="请输入提现金额"></div>
        <p class="popup-note">注：您最多可提现 <span>100</span>元</p>
        <div class="popupBtn" @click="moneyClick">
          确认提现
        </div>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  data () {
    return {
      walletList: [
        {title: '收入明细'},
        {title: '支出明细'}
      ],
      isShow: false,
      activeIndex: 0,
      currentTab: 0,
      winWidth: 0,
      winHeight: 0
    }
  },
  onLoad () {
    wx.setNavigationBarTitle({
      title: '我的钱包'
    })
    wx.setNavigationBarColor({
      frontColor: '#ffffff',
      backgroundColor: '#192231',
      animation: {
        duration: 400,
        timingFunc: 'easeIn'
      }
    })
  },
  computed: {
    navbarSliderClass () {
      if (this.activeIndex === 0) {
        return 'navbar_slider_0'
      }
      if (this.activeIndex === 1) {
        return 'navbar_slider_1'
      }
      if (this.activeIndex === 2) {
        return 'navbar_slider_2'
      }
    },
    contentHeight () {
      return this.winHeight + 'rpx'
    }
  },
  methods: {
    showClick () {
      this.isShow = true
    },
    moneyClick () {
      this.isShow = false
    },
    tabClick (e) {
      this.activeIndex = e.currentTarget.id
      console.log(e)
      this.currentTab = this.activeIndex
    },
    swiperChange (e) {
      this.currentTab = e.mp.detail.current
      console.log(e)
      this.activeIndex = this.currentTab
    },
    onAnimationfinish () {
      console.log('滑动完成.....')
    }
  }
}
</script>

<style>
  .container{
    position: relative;
  }
  .box-bg{
    height: 142rpx;
    width: 100%;
    background-color: #192231;
  }
.wallet{
  position: absolute;
  top: 92rpx;
  background-color: #fff;
  width: 690rpx;
  left: 30rpx;
  border-radius: 20rpx;
  height: 800rpx;
}
.wallet span{
  font-size: 22rpx;
}
.withdraw .num{
  font-size: 44rpx;
  color: #ee473e;
}
.balance .num{
  font-size: 26rpx;
}
.withdraw{
  padding: 70rpx 0 0 80rpx;
}
  .money{
    display: flex;
    justify-content: space-between;
  }
  .balance{
    padding: 87rpx 36rpx 0 0;
  }
  .withdrawBtn{
    font-size: 24rpx;
    color: #ee473e;
    padding: 11rpx 30rpx;
    border: 1rpx solid #ee473e;
    border-radius: 25rpx;
    margin-top: 60rpx;
  }
  .mask{
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: #ababab;
    top: 0;
    z-index: 999;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .popup{
    width: 454rpx;
    height: 421rpx;
    background-color: #f6f6f6;
    padding: 38rpx 72rpx 57rpx 72rpx;
    box-shadow: 0rpx 5rpx 0rpx #eee;
    border: 2rpx solid #eeeeee;
    border-radius: 15rpx;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
  }
  .popup-title{
    font-size: 34rpx;
    color: #353535;
  }
  .popInput{
    background-color: #f3f3f3;
    height: 78rpx;
    padding-left: 34rpx;
    width: 80%;
    font-size: 28rpx;
    color: #c0c0c0;
  }
  .popupBtn{
    width: 300rpx;
    line-height: 60rpx;
    background-color: #ed493d;
    color: #fff;
    text-align: center;
    border-radius: 25rpx;
  }
.popup-tit{
  font-size: 24rpx;
  width: 100%;
  text-align: left;
}
  .popup-note{
    font-size: 22rpx;
    color: #bbbbbb;
    width: 100%;
    text-align: left;
  }
  .icon{
    font-size: 44rpx;
    font-weight: bolder;
  }
  .navbar {
    display: flex;
    /*position: fixed;*/
    /*z-index: 500;*/
    /*top: 0;*/
    height: 80rpx;
    width: 100%;
    /*border-bottom: 1rpx solid #ccc;*/
  }
  .navbar_item {
    position: relative;
    display: block;
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    flex: 1;
    padding: 13rpx 0;
    text-align: center;
    font-size: 0;
  }
  .navbar_item .navbar_item_on {
    color: #eb493c;
  }
  .navbar_title {
    color: #3b3b3b;
    font-weight: 500;
    display: inline-block;
    font-size: 28rpx;
    max-width: 8em;
    width: auto;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-wrap: normal;
  }
  .navbar_item_on>div{
    color:#eb493c;
  }
  .navbar_item_on ::after{
    content: " ";
    width: 60%;
    display: block;
    border-radius: 4rpx;
    height: 4rpx;
    margin: 18rpx auto 0 auto;
    background-color: #eb493c;
    -webkit-transition: -webkit-transform 0.5s;
    transition: -webkit-transform 0.5s;
    transition: transform 0.5s;
    transition: transform 0.5s, -webkit-transform 0.5s;
  }
  .navbar_slider_0 {
    left: 29rpx;
    transform: translateX(0);
  }
  .navbar_slider_1 {
    left: 29rpx;
    transform: translateX(250rpx);
  }
  .navbar_slider_2 {
    left: 29rpx;
    transform: translateX(500rpx);
  }
  .content_item{
    display: flex;
    flex-direction: column;
    align-items:center;
  }
  .content{
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    padding-top: 45rpx;
    -webkit-overflow-scrolling: touch;
  }
  .income{
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
  }
  .income-money{
    font-size: 28rpx !important;
    color: #eb493c;
  }
  .income-time{
    color: #c2c2c2;
  }
  .content_item div+div{
    padding-top: 20rpx;
  }
</style>
